<template>
    <el-radio-group v-model="state.value" class="group">
        <el-radio-button value="" @change="triggerComSearch">
            <el-badge hidden>全部</el-badge>
        </el-radio-button>
        <el-radio-button v-for="(item, key) in props.data" :key="key" :value="String(item.value)" @change="triggerComSearch">
            <el-badge :value="item.count" :hidden="item.count <= 0" class="badge">
                {{ item.name }}
            </el-badge>
        </el-radio-button>
    </el-radio-group>
</template>

<script setup lang="ts">
import { inject, reactive, watch } from 'vue'
import baTableClass from '/@/utils/baTable'

const baTable = inject('baTable') as baTableClass

interface Props {
    field: string
    modelValue: string | number
    data: { name: string; value: string; count: number }[]
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
})

const state = reactive({
    value: props.modelValue.toString(),
})

const emits = defineEmits<{
    (e: 'update:modelValue', valu: string): void
}>()
emits('update:modelValue', state.value)

const triggerComSearch = () => {
    let comSearchData: comSearchData[] = []
    for (const key in baTable.comSearch.form) {
        if (!baTable.comSearch.fieldData.has(key)) {
            continue
        }
        let val = ''
        let fieldDataTemp = baTable.comSearch.fieldData.get(key)
        if (baTable.comSearch.form[key]) {
            val = baTable.comSearch.form[key]
        }
        if (val) {
            comSearchData.push({
                field: key,
                val: val,
                operator: fieldDataTemp.operator,
                render: fieldDataTemp.render,
            })
        }
    }

    baTable.onTableAction('com-search', comSearchData)
}

watch(
    () => props.modelValue,
    (newVal) => {
        state.value = newVal.toString()
    }
)
watch(
    () => state.value,
    (newVal) => {
        emits('update:modelValue', newVal)
    }
)
</script>

<style scoped lang="scss"></style>
